<template>
  <div class="box">
    <el-form
      ref="loginFormRef"
      :model="loginForm"
      :rules="loginFormRules"
      label-width="auto"
    >
      <el-form-item prop="mobile">
        <el-input
          v-model="loginForm.mobile"
          placeholder="手机号/账号"
          clearable
        />
      </el-form-item>
      <el-form-item prop="password" class="pass-item">
        <el-input
          v-model="loginForm.password"
          placeholder="密码"
          type="password"
          show-password
          clearable
        />
      </el-form-item>
      <div class="forget-item">
        <p>忘记密码?</p>
      </div>
      <el-form-item class="btn-item">
        <el-button
          type="primary"
          class="form-btn"
          @click="loginBtn(loginFormRef)"
          >登录</el-button
        >
      </el-form-item>
    </el-form>
    <div class="form-footer">
      <div class="footer-item">
        <input
          type="radio"
          v-model="agreed"
          class="form-input"
          id="privacy"
        /><label for="privacy">登录即代表你同意《AI 用户协议》</label>
      </div>
      <div class="footer-item">
        <input type="radio" class="form-input" id="autoLogin" /><label
          for="autoLogin"
          >下次自动登录</label
        >
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { FormInstance } from "element-plus";
import { ref, reactive } from "vue";
// api
import { userLogin } from "@api/login";
// hooks
import { useUserInfo } from "@hooks/user";
// ref
const loginFormRef = ref<FormInstance>();
// 协议radio
const agreed = ref(false);
// form表单数据
const loginForm = reactive({
  mobile: "",
  password: "",
});
// 表单校验规则
const loginFormRules = reactive({
  mobile: [
    { required: true, message: "请输入手机号", trigger: "blur" },
    { pattern: /^1[0-9]{10}$/, message: "请输入正确的手机号", trigger: "blur" },
  ],
  password: [
    { required: true, message: "密码不能为空", trigger: "blur" },
    {
      pattern: /.{6,}/,
      message: "密码必须是6位以上",
      trigger: "blur",
    },
  ],
});
const loginBtn = async (formEl: FormInstance | undefined) => {
  // 是否同意协议
  if (!agreed.value) {
    ElNotification.warning("请同意用户协议！");
    return;
  }
  if (!formEl) return;
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      const res = await userLogin(loginForm.mobile, loginForm.password);
      if (res.code == 0) {
        // 登录成功
        ElNotification({
          showClose: true,
          message: res.errorMessage,
          type: "success",
        });
        useUserInfo(res.data.token);
      } else {
        ElNotification({
          title: "Error",
          message: res.errorMessage,
          type: "error",
        });
      }
    } else {
      console.log("没通过验证！！！！");
    }
  });
};
</script>

<style lang="scss" scoped>
.box {
  margin: 0 45px 23px 45px;
  display: flex;
  flex-direction: column;
  .el-form {
    width: 100%;
    :deep(.el-input) {
      height: 46px;
      --el-input-bg-color: rgba(250, 240, 240, 0.8);
      --el-input-border-radius: 9px 9px 9px 9px;
      --el-input-text-color: #232323;
      font-size: 13px;
    }
    :deep(.el-input__wrapper) {
      box-shadow: none;
    }
    .pass-item {
      margin-bottom: 23px;
    }
    .forget-item {
      display: flex;
      justify-content: flex-end;
      p {
        font-size: 13px;
        color: #232323;
        margin: 0;
      }
    }
    .btn-item {
      margin-top: 23px;
      margin-bottom: 0;
      .form-btn {
        width: 100%;
        height: 46px;
        background: #c90000;
        border-radius: 9px 9px 9px 9px;
      }
    }
  }
  .form-footer {
    display: flex;
    justify-content: space-between;
    margin-top: 30px;
    .footer-item {
      display: flex;
      align-items: center;
      label {
        font-size: 12px;
        color: #232323;
        margin-left: 7px;
      }
    }
  }
}
</style>
